<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Multiple Stickies</title>
  <meta name="description" content="Nice example showing multiple stickies on one page.">
  <link rel="stylesheet" href="demo.css">
  <script src="hc-sticky.js"></script>
</head>

<body class="demo demo_3">

  <main>

    <article>
      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>
    </article>

    <article>
      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>
    </article>

    <article>
      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>
    </article>

    <article>
      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>
    </article>

    <article>
      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>
    </article>

  </main>

  <script>
    "use strict";

    var elements = document.getElementsByTagName('figure');

    for (var i = 0; i < elements.length; i++) {
      new hcSticky(elements[i], {
        stickTo: elements[i].parentNode,
        top: 20,
        bottomEnd: 30
      });
    }

  </script>

</body>
</html>
